<template>
  <div class="base-payment-info">
    <div class="order-records">
      <div class="head">
        <img class="img"
             src="../../assets/index/tag.png"
             alt="" />
        基本信息
      </div>
      <div class="essential-information">
        <el-table class="el-table"
                  ref="multipleTable"
                  :data="tableData"
                  border
                  style="width: 100%">
          <el-table-column prop="orderId"
                           label="订单编号">
          </el-table-column>
          <el-table-column prop="userId"
                           label="用户账号">
            <template slot-scope="scope">
              {{ scope.row.userId }}
              <el-button type="text"
                         @click="handleClick(scope.row)"
                         size="small">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="nickname"
                           label="姓名"> </el-table-column>
          <el-table-column prop="phone"
                           label="手机号"> </el-table-column>
          <el-table-column prop="wechat"
                           label="微信号"> </el-table-column>
        </el-table>
        <el-table class="el-table"
                  ref="multipleTable"
                  :data="tableData"
                  border
                  style="width: 100%">
          <el-table-column prop="email"
                           label="邮箱"> </el-table-column>
          <el-table-column prop="orderSource"
                           label="订单来源"> </el-table-column>
          <el-table-column prop="orderType"
                           label="订单类型">
          </el-table-column>
          <el-table-column v-if="deposit"
                           prop=""
                           label="押金金额">{{ deposit }}
          </el-table-column>
          <el-table-column v-if="tuition"
                           prop=""
                           label="学费">{{tuition}}
          </el-table-column>
          <el-table-column v-if="applicationfee"
                           prop=""
                           label="申请费用金额">{{applicationfee}}
          </el-table-column>
          <!-- 默认押金有数据，若学费或申请费用金额都无数据，则表单补一列为空的表格 -->
          <el-table-column v-if="!(tuition||applicationfee)"
                           prop=""
                           label="">
          </el-table-column>
        </el-table>
      </div>
      <div class="head">
        <img class="img"
             src="../../assets/index/tag.png"
             alt="" />
        支付信息
      </div>
      <div class="essential-information">
        <el-table class="el-table"
                  ref="multipleTable"
                  :data="tableData[0].pay"
                  border
                  style="width: 100%">
          <el-table-column prop="type"
                           label="费用类型">
          </el-table-column>
          <el-table-column prop="payId"
                           label="支付流水号">
          </el-table-column>
          <el-table-column prop="method"
                           label="支付方式"> </el-table-column>
          <el-table-column prop="amount"
                           label="支付金额"> </el-table-column>
          <el-table-column prop="payTime"
                           label="支付时间">
          </el-table-column>
        </el-table>
      </div>
      <!-- 申请择校信息 -->
      <div>
        <schoolinfo></schoolinfo>
      </div>
      <!-- 第二个基本信息 -->
      <div>
        <baseinfo></baseinfo>
      </div>
      <!-- 教育基本信息 -->
      <div>
        <educationinfo></educationinfo>
      </div>
      <!-- 其他信息和推荐人信息 -->
      <div>
        <otherinfo></otherinfo>
      </div>
    </div>
  </div>
</template>

<script>
import schoolinfo from '../../component/choiceschoolinfo/choiceschoolinfo.vue'
import baseinfo from '../../component/baseinfo/baseinfo.vue'
import educationinfo from '../../component/educationinfo/educationinfo.vue'
import otherinfo from '../../component/otherinfo/otherinfo.vue'

import {
  getOrderByid,
} from '../../../src/api/index'
export default {
  name: 'base-payment-info',
  components: {
    schoolinfo,//申请择校信息
    baseinfo,//第二个基本信息
    educationinfo,//教育信息
    otherinfo,//其他信息&推荐人信息
  },
  data () {
    return {
      baseinfo: {}, //基本信息
      recommender: [],//推荐人信息
      experience: [],//其他信息-实习经历
      activity: [],//其他信息-活动
      skill: [],//其他信息-技能
      prize: [],//其他信息-奖项
      paper: [],//其他信息-论文
      neworderId: 0,//默认订单号
      number: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
    }
  },
  props: {
    orderId: {
      type: String,
      default: function () {
        return '';
      }
    }
  },
  computed: {
    tableData () {
      if (this.baseinfo) { 
        let newdata = []
        newdata[0] = this.baseinfo
        console.log(JSON.parse(JSON.stringify(this.baseinfo)));
        if (this.baseinfo.pay) {
          console.log(this.baseinfo.pay[0].amount);
        }
        return newdata;
      }

    },
    deposit () {
      let a = ''
      console.log(this.baseinfo);
      if (this.baseinfo.pay) {
        this.baseinfo.pay.forEach(item => {
          if (item.type === "押金") {
            a = item.amount
            console.log(a);
          }
        });
        // console.log(a);
      }
      return a
    },
    tuition () {
      let a = ''
      if (this.baseinfo.pay) {
        this.baseinfo.pay.forEach(item => {
          if (item.type === "学费") {
            a = item.amount
          }
        });
      }
      return a
    },
    applicationfee () {
      let a = ''
      if (this.baseinfo.pay) {
        this.baseinfo.pay.forEach(item => {
          if (item.type === "申请费用金额") {
            a = item.amount
          }
        });
      }
      return a
    }
  },
  watch: {
    orderId: function (newVal, oldVal) {
      this.neworderId = newVal
      // console.log(window.sessionStorage.getItem('orderId'));
      // console.log(this.$route.params.val.orderId); //也能拿到orderId,值与newval一样
      this.getList()
    }
  },
  mounted () {

  },

  methods: {
    getList () {
      //第一个基本资料
      getOrderByid(window.sessionStorage.getItem('orderId')).then(data => {
        // console.log(data);
        this.baseinfo = data.data
        if (window.sessionStorage.getItem('orderType') === '方案订单') {
          this.baseinfo.orderType = '方案订单'
        }
        if (window.sessionStorage.getItem('orderType') === '留学申请订单') {
          this.baseinfo.orderType = '留学申请订单'
        }
        console.log(this.baseinfo);
      });
    },
  },
}
</script>

<style scoped>
.img {
  width: 15px;
  height: 15px;
  margin-top: 15px;
}
.order-records {
  width: 95%;
  height: auto;
  margin-top: 20px;
  margin-left: 20px;
  padding: 0 20px;
  /* padding-left: 20px; */
  padding-bottom: 20px;
  background-color: white;
}
.head {
  height: 50px;
  padding-top: 20px;
  padding-left: 20px;
  color: #666666;
  font-size: 18px;
}
.essential-information {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
